<!-- 添加热词 -->
<template>
  <el-dialog :title="title" :visible.sync="mVisible" v-if="mVisible" @close="dialogClose" :close-on-press-escape="false"
             :close-on-click-modal="false">
    <div>
      <el-input style="width: 180px; margin-right: 20px;" v-model="query.keyword" placeholder="请输入商品名称"
                @keyup.enter.native="handleSearch"></el-input>
      <Cbutton @click="handleSearch" :btnloading="tableLoading">搜索</Cbutton>
    </div>

    <div class="edit-con">
      <div style="margin: 20px 0;">
        <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
          <el-table-column label="商品名称" prop="name" min-width="130" align="center"></el-table-column>
          <el-table-column prop="pic" label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.pic || ''" style="width: 50px; height: 50px" fit="fit" :preview-src-list="scope.row.pic ? [scope.row.pic] : []"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" prop="productStyleStr" align="center"></el-table-column>
          <el-table-column label="商品价格" prop="priceStr" align="center"></el-table-column>
          <el-table-column label="积分价格" prop="usePointLimitStr" align="center"></el-table-column>
          <el-table-column label="库存" prop="stock" align="center"></el-table-column>
          <el-table-column label="库存" prop="stock" align="center">
            <template slot-scope="scope">
              <span class="click-ele danger" @click="handleRemove(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="select-page">
        <div class="select-page-left">
          <span>已选{{selectionList ? selectionList.length : 0}}&nbsp;&nbsp;</span>
          <span class="click-ele danger" @click="handleRemove('')" v-if="selectionList && selectionList.length > 0">删除</span>
          <span v-else class="click-ele info" style="cursor: not-allowed;">删除</span>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.pageNum"
                       :page-size="query.pageSize" :page-sizes="[5, 10, 20, 40, 100]" layout="sizes, total, prev, pager, next"
                       :total="totalCount">
        </el-pagination>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { GetHotWordDetail, DeleteHotWordProduct } from '@/api/onlineMan'
export default {
  name: '',
  components: {},
  data () {
    return {
      title: '查看商品',
      query: {
        keyword: '',
        hotId: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,
      selectionList: []
    }
  },
  props: {
    modalShow: {
      type: Boolean,
      default: false
    },
    cid: {
      type: Number || String,
      default: ''
    }
  },
  watch: {
    'cid': function (val) {
      this.query.hotId = val
    }
  },
  computed: {
    mVisible: {
      get () {
        return this.modalShow
      },
      set (val) {
        this.$emit('update:modalShow', val)
      }
    }
  },
  mounted () {
    this.query.hotId = this.cid
    this.getList()
  },
  methods: {
    getList () {
      let params = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      GetHotWordDetail(params).then(res => {
        this.tableLoading = false
        const data = res.data
        let list = data.productList.list || []
        list.forEach(e => {
          e.productStyleStr = (e.productStyle === 1 ? '单' : '多') + '规格'
          e.priceStr = e.productStyle === 1 ? e.price.toFixed(2) || 0 : e.originalPrice || 0
          e.usePointLimitStr = e.productStyle === 1 ? e.usePointLimit || 0 : e.originUsePointLimit || 0
        })
        this.tableList = list
        this.totalCount = data.productList.total
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    dialogClose () {
    },
    handleRemove (row) {
      let tips = ''
      let params = {
        id: this.cid,
        productList: []
      }
      if (row) {
        params.productList = [{ id: row.id }]
        tips = '确定要删除该件商品吗？'
      } else {
        params.productList = this.selectionList.map(e => {
          return { id: e.id }
        })
        tips = '确定要删除选中的商品吗？'
      }
      this.$confirm(`${tips}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteHotWordProduct(params).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    handleSelectionChange (selection) {
      this.selectionList = selection
    },
    handleCurrentChange (value) {
      this.query.pageNum = value
      this.getList()
    },
    handleSizeChange (value) {
      this.query.pageSize = value
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
